<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no" />
<%@ include file="/WEB-INF/views/wx/include/head.jsp" %>
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.picker.min.css">
<style>
.fix-push-top {margin-top:85px;}
.schename {font-size:16px; color:#000000;}
#queryPopover .mui-content {margin-top:200px;}
.order_cal {width:24px;height:24px;}
#queryPopover {position: fixed;top:5px;right:5px !important;}
#queryPopover .mui-popover-arrow {left: auto;right: 5px !important;}
.mui-popover {height: 200px;width:200px !important;}
.mui-popover label {color:#929292;}
.right-btn {margin-top:20px !important;}
.btn-small {padding:2px 12px !important;}
.btn-right {margin-right:-10px !important;}
.orders-money{margin-right:-10px;}
</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a href="${ctxWx}/pu/my" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
		<a href="#queryPopover" class="mui-icon mui-pull-right"><img class="order_cal" src="${ctxStatic }/modules/wx/images/order_cal.png" /></a>
		<h1 class="mui-title">我的订单</h1>
	</header>
	<div class="mui-content">
		<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			<a class="opt-item mui-control-item ${orders.orderstatus == TORDERS_STATUS_PAY?'mui-active':''}" href="#" data-value="${TORDERS_STATUS_PAY }"> 已付款 </a>
			<a class="opt-item mui-control-item ${orders.orderstatus == TORDERS_STATUS_NO_PAY?'mui-active':''}" href="#" data-value="${TORDERS_STATUS_NO_PAY }"> 待支付 </a>
			<!-- <a class="opt-item mui-control-item" href="#" data-value=""> 已完成</a>-->
			<a class="opt-item mui-control-item ${orders.orderstatus == TORDERS_STATUS_BACK?'mui-active':''}" href="#" data-value="${TORDERS_STATUS_BACK }"> 已取消</a> 
			<a class="opt-item mui-control-item ${orders.orderstatus == TORDERS_STATUS_CANCEL?'mui-active':''}" href="#" data-value="${TORDERS_STATUS_CANCEL }"> 已作废</a>
		</div>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper fix-push-top">
			<div class="mui-scroll">
				<c:choose>
					<c:when test="${not empty page.list}">
						<ul id="view_list" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
							<c:forEach items="${page.list}" var="orders">
								<li class="mui-table-view-cell" data-orderid="${orders.orderid}">
									<div class="mui-pull-left">
										<h5 class="schename">${orders.ordername }</h5>
										<p class="mui-h5 mui-ellipsis">订单号：${orders.orderid }</p>
										<p class="mui-h5 mui-ellipsis">
											<c:if test="${orders.ordertype ne ORDER_TYPE_REALSCHE_SELF_TRAVEL}">
												<fmt:formatDate value="${orders.departdate }" pattern="yyyy年MM月dd日"/>
											</c:if>
											<c:if test="${orders.ordertype eq ORDER_TYPE_REALSCHE_SELF_TRAVEL}">
												<fmt:formatDate value="${orders.departdate }" pattern="MM月dd日 HH:mm 开" />
											</c:if>
										</p>
									</div>
									<div class="mui-pull-right mui-text-right">
										<div><span class="mui-h5 orders-money"><i class="icon-yen"></i>${orders.dueamount}</span></div>
										<div class="right-btn">
											<span class="mui-h5">
												
												<button type="button" class="mui-btn mui-btn-blue btn-small" onclick="window.location.href='${ctxWx}/pu/orders/orderDetail?orderid=${orders.orderid }'">查询</button>
												<c:if test="${orders.orderstatus == TORDERS_STATUS_PAY}">
													<c:if test="${orders.ordertype == ORDER_TYPE_REALSCHE_SELF_TRAVEL}">
														<button type="button" class="mui-btn mui-btn-warning btn-small btn-right" onclick="backMoney('${orders.orderid }',1);">退票</button>
													</c:if>
													<c:if test="${orders.ordertype ne ORDER_TYPE_REALSCHE_SELF_TRAVEL}">
														<button type="button" class="mui-btn mui-btn-warning btn-small btn-right" onclick="backMoney('${orders.orderid }',2);">退票</button>
													</c:if>
												</c:if>
												<c:if test="${orders.orderstatus == TORDERS_STATUS_NO_PAY}">
													<button type="button" class="mui-btn mui-btn-primary btn-small" onclick="window.location.href='${ctxWx}/pu/pay/payWay?orderid=${orders.orderid }&boardaddrfc=${orders.realscheOff.siteid }&offaddrfc=${orders.realscheBoard.siteid }'">支付</button>
													<button type="button" class="mui-btn mui-btn-warning btn-small btn-right" onclick="cancel('${orders.orderid }');">取消</button>
												</c:if>
												<c:if test="${orders.orderstatus == TORDERS_STATUS_CANCEL}">
													<button type="button" class="mui-btn mui-btn-warning btn-small btn-right" onclick="deleteOrder('${orders.orderid }');">删除</button>
												</c:if>
											</span>
										</div>
									</div>
								</li>
							</c:forEach>
						</ul>
					</c:when>
					<c:otherwise>
						<p class="nodata-tip">没有查到信息</p>
					</c:otherwise>
				</c:choose>
			</div>
		</div>
	</div>
	<div id="queryPopover" class="mui-popover">
		<div class="mui-popover-arrow"></div>
		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<form id="queryForm" class="mui-input-group" action="${ctxWx }/pu/orders/orderList" method="get">
					<div class="mui-input-row">
						<label>起始</label>
						<input id="createDateQueryStart" name="createDateQueryStart" type="text" value="${orders.createDateQueryStart }" readonly>
					</div>
					<div class="mui-input-row">
						<label>终止</label>
						<input id="createDateQueryEnd" name="createDateQueryEnd" type="text" value="${orders.createDateQueryEnd }" readonly>
					</div>
					<div class="mui-input-row">
						<label>状态</label>
						<select name="orderstatus">
							<option value="${TORDERS_STATUS_PAY }" ${orders.orderstatus == TORDERS_STATUS_PAY?'selected':''}>已付款</option>
							<option value="${TORDERS_STATUS_NO_PAY }" ${orders.orderstatus == TORDERS_STATUS_NO_PAY?'selected':''}>待支付</option>
							<option value="${TORDERS_STATUS_CANCEL }" ${orders.orderstatus == TORDERS_STATUS_CANCEL?'selected':''}>已作废</option>
						</select>
					</div>
				</form>
				<div class="mui-content-padded">
					<button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="$('#queryForm').submit();">查询</button>
				</div>
			</div>
		</div>
	</div>
	<%@ include file="/WEB-INF/views/wx/include/script.jsp"%>
	<script src="${ctxStatic }/mui/js/mui.picker.js"></script>
	<script src="${ctxStatic }/mui/js/mui.dtpicker.js"></script>
	<script>
		$(function(){
			//界面滚动
			mui('.mui-scroll-wrapper').scroll();
			
/* 			//点击详情
			$('li.mui-table-view-cell').on('tap',function(e){
				window.location.href='${ctxWx}/pu/orders/orderDetail?orderid='+$(this).attr('data-orderid');
			}); */
			
			$('#createDateQueryStart').click(function(){
				var picker = new mui.DtPicker({"value":"${orders.createDateQueryStart }","type":"date"});
				picker.show(function(rs) {
					$('#createDateQueryStart').val(rs.text);
					picker.dispose();
				});
			});
			$('#createDateQueryEnd').click(function(){
				var picker = new mui.DtPicker({"value":"${orders.createDateQueryEnd }","type":"date"});
				picker.show(function(rs) {
					$('#createDateQueryEnd').val(rs.text);
					picker.dispose();
				});
			});
			
			$('.opt-item').on('tap',function(){
				var status = $(this).attr('data-value');
				if(status != '') {
					window.location.href = '${ctxWx }/pu/orders/orderList?createDateQueryStart=${orders.createDateQueryStart }&createDateQueryEnd=${orders.createDateQueryEnd }&orderstatus='+$(this).attr('data-value');
				}
			});
		});
		function cancel(orderid,type){
			mui.confirm('确认取消该订单？', '温馨提示', ['确认', '取消'], function(e) {
				if (e.index == 0) {
					if(type==1){
						window.location.href='${ctxWx}/pu/pay/cancel?orderid='+orderid+'&createDateQueryStart=${orders.createDateQueryStart }&createDateQueryEnd=${orders.createDateQueryEnd }';
					}
					if(type==2){
						window.location.href='${ctxFront}/pay/backMoney?orderid='+orderid;
					}
				} else {
					setTimeout(function() {
						$.swipeoutClose(elem);
					}, 0);
				}
			});
		}
		
		
		//废除订单的删除
		function deleteOrder(orderid){
			mui.confirm('确认删除该订单？', '温馨提示', ['确认', '取消'], function(e) {
				if (e.index == 0) {
					window.location.href='${ctxWx}/pu/pay/deleteOrder?orderid='+orderid;
				} else {
					setTimeout(function() {
						$.swipeoutClose(elem);
					}, 0);
				}
			});
		}
		
		function backMoney(orderid,type){
			mui.confirm('确认退票？', '温馨提示', ['确认', '取消'], function(e) {
				if (e.index == 0) {
					window.location.href='${ctxWx}/pu/realsche/backMoney?orderid='+orderid+'&createDateQueryStart=${orders.createDateQueryStart }&createDateQueryEnd=${orders.createDateQueryEnd }';
				} else {
					setTimeout(function() {
						$.swipeoutClose(elem);
					}, 0);
				}
			});
		}
	</script>
</body>
</html>